<script setup lang="ts">
import LogoLink from '@/components/LogoLink.vue';
import Homepage_Main_Button from '@/components/Homepage-Main-Button.vue';
import Homepage_Top_LoginButton from '@/components/Homepage-Top-LoginButton.vue';
import Homepage_Top_RegisterButton from '@/components/Homepage-Top-RegisterButton.vue'
import { ref } from 'vue';
import Homepage_Top_ershoukuButton from "@/components/Homepage-Top-ershoukuButton.vue";
const Login = ref('登录');
const Top_Register = ref('注册');
const Main_Register = ref('现在注册');
const ershouku = ref('二手库');
</script>


<template>
  <div class="common-layout">
    <!-- 全屏背景 -->
    <div class="Background"></div>

    <!-- 最外层容器 -->
    <el-container>
      <!-- 主体区域 -->
      <el-main class="Body">
        <!-- 固定的顶部导航区域 -->
        <div class="Top">
          <!-- 左侧内容（使用组件） -->
          <div class="Top-left">
            <LogoLink/>
          </div>

          <!-- 右侧按钮 -->
          <div class="Top-right">
            <Homepage_Top_ershoukuButton :button-text="ershouku" />
            <Homepage_Top_LoginButton :button-text="Login" />
            <Homepage_Top_RegisterButton :button-text="Top_Register" />
          </div>
        </div>

        <!-- 主体内容区域 -->
        <div class="main-content">
          <div class="Wellcome">
            <h1>Fast & Reliable Transaction</h1>
            <h2>一款更快速、更可靠的二手交易网站</h2>
            <Homepage_Main_Button :button-text="Main_Register"/>
            <h3></h3>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<style scoped>
/* 全屏背景 */
.Background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('@/assets/Homepage.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1;
}

/* 主体区域样式 */
.Body {
  width: 100%;
  min-height: 0px;
  background-color: transparent;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.main-content {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.Wellcome {
  width: 100%;
  flex: 1;
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Wellcome h1 {
  font-size: 90px;
  color: #fff;
  text-shadow: 0 0 5px #000000, 0 0 10px #ffffff, 0 0 20px #000000;
}
.Wellcome h2 {
  font-size: 36px;
  text-shadow: 0 0 5px #000000, 0 0 10px #ffffff, 0 0 20px #000000;
}

/* 主容器 Top 使用 flex 布局并固定定位 */
.Top {
  width: 100%;
  height: 80px; /* 修改此处：从 60px 改为 100px */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between; /* 左右子元素分别贴靠两侧 */
  align-items: center;
  padding: 0 100px; /* 左右边距各 100px */
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.3);
}


/* 左侧区域样式 */
.Top-left {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-start; /* 内容靠左对齐 */
}

/* 右侧按钮区域样式 */
.Top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 按钮靠右排列 */
}

/* 定义 .top-button 的基础样式 */
.top-button {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid transparent !important; /* 改为透明边框 */
  font-size: 25px !important;
  min-width: 100px !important;
  height: 60px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin-right: 30px;
  text-shadow: 0 0 5px #000000, 0 0 10px #ffffff, 0 0 20px #000000;
}

.top-button:hover {
  color: #000000 !important;
  border-color: transparent !important; /* 悬停时也保持透明 */
}



</style>
